<template>
	<view>
		<pan-gesture-handler onGestureEvent="handlepan">
			<view class="circle" @tap="onTap">
			<view class="item"
			 :style="{transform:`translateY(${isOpen?(-(index+1) * 52):0}px)`}"
			 v-for="(item,index) in menuList" :key="item">
				{{item}}
			</view>
			<view class="item">
				点击拖动
			</view>
			</view>
		</pan-gesture-handler>
	</view>
</template>

<script>
	import {
		ref,
		onMounted,
		watch,
		nextTick,
		getCurrentInstance
	} from "vue"
	const GestureState = {
		POSSIBLE: 0,
		BEGIN: 1,
		ACTIVE: 2,
		END: 3,
		CANCELLED: 4
	}
	const {
		shared,
		spring
	} = wx.worklet;
	const x = shared(0);
	const y = shared(0);
	const itemy = shared(0);
	const scale = shared(1);
	const pressed = shared(false);
	const wxWidth = shared(0)
	const wxHeight = shared(0)
	export default {
		name: "BsDrag",
		data() {
			return {
				isOpen:false,
				menuList:[
					'电话','客服','订单'
				]
			};
		},
		methods: {
			onTap(){
				this.isOpen = !this.isOpen
			},
			handlepan(evt) {
				'worklet';
				if (evt.state === GestureState.POSSIBLE) {
					pressed.value = true
					scale.value = spring(1.2);
				} else if (evt.state === GestureState.END || evt.state === GestureState.CANCELLED) {
					pressed.value = false
					scale.value = spring(1);
					if (x.value > 0) {
						x.value = spring(0);
					} else if ((wxWidth.value + x.value) < 50) {
						x.value = spring(-(wxWidth.value - 50));
					}
					if (((wxHeight.value * 0.3 * 0.3) - y.value) < 0) {
						y.value = spring(wxHeight.value * 0.3 * 0.3);
					} else if (((wxHeight.value * 0.5) + y.value) < 0) {
						y.value = spring(-wxHeight.value * 0.5);
					}
					console.log('y', y.value);
				} else if (evt.state === GestureState.ACTIVE) {
					x.value += evt.deltaX;
					y.value += evt.deltaY;
				}
			},
		},
		mounted() {
			const {
				globalProperties: global
			} = getCurrentInstance().appContext.config;
			const {
				windowWidth,
				windowHeight
			} = global.windowInfo
			wxWidth.value = windowWidth
			wxHeight.value = windowHeight
			console.log('windowWidth', windowWidth);
			const scope = getCurrentInstance().proxy.$scope
			scope.applyAnimatedStyle('.circle', () => {
				'worklet';
				return {
					backgroundColor: pressed.value ? 'rgba(170, 255, 255, 0.5)' : 'rgba(213, 255, 255, 0.3)',
					transform: `translate(${x.value}px, ${y.value}px) scale(${scale.value})`,
				};
			});
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.circle {
		position: fixed;
		right: 0;
		top: 70vh;
		width: 50px;
		height: 50px;
		backdrop-filter: blur(10px);
		background-color: rgba(213, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item{
		top: 0;
		left: 0;
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: rgba(213, 255, 255, 0.9);
		transition:all .2s;
	}
</style>